angular.module('app').config(($stateProvider) => {

    $stateProvider.state('app.popover', {
        url         : '/popover',
        label       : 'Popover',
        controller  : 'app.popover',
        controllerAs: '$ctrl',
        templateUrl : 'view/app/popover/popover.html'
    });
}).controller('app.popover', function ($scope, $ionicPopover) {
    let ctrl = this, popover;
    /////////////////////////////////////////////////
    // $ionicPopover
    /////////////////////////////////////////////////
    /**
     * fromTemplate(templateString, options)
     * 初始化一个 Popover
     * 返回一个 ionicPopover 对象
     * - options: 详见 ionicPopover 的 initialize 配置
     */
    popover = $ionicPopover.fromTemplate(templateString(), {
        scope: $scope
    });
    /**
     * fromTemplateUrl(templateUrl, options)
     * 初始化一个 Popover
     * 返回一个 promise, 该 promise 会 resolved 一个 ionicPopover 对象
     */
    // $ionicPopover.fromTemplateUrl(templateUrl, options).then((ionicPopover)=> {});

    /////////////////////////////////////////////////
    // ionicPopover
    /////////////////////////////////////////////////
    /**
     * initialize(options)
     * 创建一个 popover 实例
     * - options:
     *   - scope:
     *   - focusFirstInput: popover 显示时 focus 第一个 input, 默认 false.
     *   - backdropClickToClose: 点击 backdrop 区域时关闭 popover, 默认 true.
     *   - hardwareBackButtonClose: 点击手机返回按钮时关闭 popover, 默认 true.
     */
    /**
     * show($event)
     * 显示 popover
     * - $event: $event 或者是 element 表示 popover 向该元素对齐
     * 返回一个 promise, 当 popover 显示的动画完成后才 resolved
     */
    ctrl.showPopover = ($event)=> {
        popover.show($event).then(function () {
            console.log(popover.isShown());
        });
    };
    /**
     * hide()
     * 隐藏 popover
     * 返回一个 promise, 当 popover 隐藏的动画完成后才 resolved
     */
    /**
     * remove()
     * 删除 popover. 记住 popover 使用完成后一定调用该方法避免内存泄漏
     * 返回一个 promise, 当 popover 隐藏的动画完成后才 resolved
     */
    /**
     * isShown()
     * 判断当前 popover 是否显示
     */
    console.log(popover.isShown());

    function templateString() {
        let content = [];
        content.push('<ion-popover-view>');
        content.push('  <ion-header-bar> <h1 class="title">My Popover Title</h1> </ion-header-bar>');
        content.push('  <ion-content> Hello! </ion-content>');
        content.push('</ion-popover-view>');
        return content.join('');
    }
});